<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/loginstyle.css">
    <title>Register</title>
    <!-- 引入vue框架 -->
    <script src="../lib/js/vue.js"></script>
    <!-- 引入axios库 -->
    <script src="../lib/js/axios.js"></script>
    <!-- 引入config -->
    <script src="../lib/js/config.js"></script>
</head>

<body>
    <div class="login-card">
        <h2>Register</h2>
        <h3>Enter your credentials</h3>
        <form class="login-form" id="register-form">
            <input type="text" placeholder="账号" v-model="user.userAccount" required>
            <input type="password" placeholder="密码" v-model="user.userPassword" required>
            <!-- <input type="password" placeholder="再次输入密码" v-model="user.password1" required> -->
            <input type="email" placeholder="邮箱" v-model="user.userEmail" required>
            
            <!-- 下拉框 -->
            <select name="identity" id="identity" v-model="user.userRole">
                <option value="select">请选择身份</option>
                <option value="0">学生</option>
                <option value="1">教师</option>
                <!-- 管理员不能注册 -->
                <!-- <option value="teacher">管理员</option> -->
            </select>

            <button type="button" @click="register">注册</button>
            <button type="button" @click="onCancel">取消</button>
        </form>
    </div>

    <script>
        // 注册实例
        var register = new Vue({
            el: '#register-form',
            data: {
                user: {
                    userAccount: '',
                    userPassword: '',
                    userEmail: '',
                    userRole: 'select',
                },
                captcha: null,
            },
            methods: {
                register() {
                    // 构建发送到后端的数据对象
                    const userData = {
                        userAccount: this.user.userAccount,
                        userPassword: this.user.userPassword,
                        userEmail: this.user.userEmail,
                        userRole: this.user.userRole,
                    };

                    axios.post('/user/register', userData).then(response => {
                        console.log(response.data);
                        if (response.data.data == true) { // 使用严格相等比较
                            alert('注册成功');
                            window.location.href = '../html/index.html';
                            // 你可以在这里添加跳转逻辑，例如 window.location.href = '/dashboard';
                        } else {
                            alert('注册失败，请检查用户名、密码和验证码');
                        }
                    }).catch(error => {
                        console.error('注册失败:', error);
                        alert('注册失败，请检查用户名、密码和验证码!');
                    });
                },
                onCancel() {
                    // 取消，返回login页面
                    window.location.href = '../html/login.html';
                }
            },
        });
    </script>
</body>

</html>